<template>
  <div class="contantWrap" style="margin-top: 5px">
    <div class="tobBox tobBoxNo">
      <i class="icon01"></i>
      <div class="rightBox">
        <p>RAIM ADS-B预测子系统</p>
        <span>正常运行</span>
      </div>
    </div>
    <div class="tobBox">
      <i class="icon02"></i>
      <div class="rightBox">
        <p>GNSS卫星数据接收处理子系统</p>
        <span>正常运行</span>
      </div>
    </div>
    <div class="tobBox tobBoxNo">
      <i class="icon03"></i>
      <div class="rightBox">
        <p>GNSS导航卫星完好性监测系统</p>
        <span>正常运行</span>
      </div>
    </div>
    <div class="tobBox tobBoxNo">
      <i class="icon04"></i>
      <div class="rightBox">
        <p>实时预测计算子系统</p>
        <span>正常运行</span>
      </div>
    </div>
    <div class="tobBox tobBoxNo">
      <i class="icon05"></i>
      <div class="rightBox">
        <p>无法连接至数据库</p>
        <span>正常运行</span>
      </div>
    </div>
    <div class="tobBox tobBoxNo">
      <i class="icon05"></i>
      <div class="rightBox">
        <p>无法连接至数据库</p>
        <span>正常运行</span>
      </div>
    </div>

    <div class="bottomWrap">
      <div class="bottomBox">
        <div class="leftBox">
          <p>服务器</p>
          <span style="color: #222">16.172.0.0</span>
        </div>
        <div class="rightBox">
          <span class="defaultSpan lightSpan">100%</span>
          <span class="defaultSpan lightSpan">100%</span>
          <span class="defaultSpan lightSpan">100%</span>
        </div>
      </div>
      <div class="bottomBox bottomNo">
        <div class="leftBox">
          <p>服务器</p>
          <span style="color: #222">16.172.0.0</span>
        </div>
        <div class="rightBox">
          <span class="defaultSpan lightSpan">100%</span>
          <span class="defaultSpan lightSpan">100%</span>
          <span class="defaultSpan lightSpan">100%</span>
        </div>
      </div>
    </div>
    <div style="height: 10px"></div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.contantWrap {
  min-height: calc(100vh - 108px);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: flex-start;
  font-weight: 700;
  gap: 10px;
  width: 100%;
  // padding: 24px 32px 0 32px;
  box-sizing: border-box;

  .bottomWrap {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
  }
  .bottomBox {
    width: 500px;
    height: 260px;
    flex-shrink: 0;
    border-radius: 12px;
    border-left: 8px solid #00c27c;
    box-shadow: 0 0 15px 0 rgba(34, 34, 34, 0.2);
    background-image: url("../../assets/images/home/Group.png");
    background-position: center center;
    background-size: auto;
    background-repeat: no-repeat;
    position: relative;
    .leftBox {
      position: absolute;
      left: 40px;
      bottom: 60px;
    }
    p {
      font-size: 14px;
    }
    span {
      font-size: 14px;
      color: #00c27c;
    }
    .rightBox {
      position: absolute;
      top: 12px;
      right: 40px;
      margin-top: 27px;
      font-weight: 700;
      gap: 24px;
      padding-left: 32px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .defaultSpan {
        display: inline-block;
        font-size: 14px;
        line-height: 50px;
      }
    }
    .icon01 {
      margin-top: 16px;
      margin-left: 38px;
      float: left;
      width: 100px;
      height: 92px;
      background-image: url("../../assets/images/home/box1.png");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .icon02 {
      margin-top: 16px;
      margin-left: 38px;
      float: left;
      width: 100px;
      height: 92px;
      background-image: url("../../assets/images/home/box2.png");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .tobBox {
    width: 500px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 12px;
    border-left: 8px solid #00c27c;
    background: #fff;
    box-shadow: 0 0 15px 0 rgba(34, 34, 34, 0.2);
    span {
      font-size: 14px;
      font-weight: 700;
      color: #00c27c;
    }
    p {
      font-size: 14px;
    }
    .rightBox {
      margin-top: 27px;
      gap: 15px;
      padding-left: 32px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .icon01 {
      margin-top: 16px;
      margin-left: 38px;
      float: left;
      width: 100px;
      height: 92px;
      background-image: url("../../assets/images/home/box1.png");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .icon02 {
      margin-top: 16px;
      margin-left: 38px;
      float: left;
      width: 100px;
      height: 92px;
      background-image: url("../../assets/images/home/box2.png");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .icon03 {
      margin-top: 16px;
      margin-left: 38px;
      float: left;
      width: 100px;
      height: 92px;
      background-image: url("../../assets/images/home/box3.png");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .icon04 {
      margin-top: 16px;
      margin-left: 38px;
      float: left;
      width: 100px;
      height: 92px;
      background-image: url("../../assets/images/home/box4.png");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .icon05 {
      margin-top: 16px;
      margin-left: 38px;
      float: left;
      width: 100px;
      height: 92px;
      background-image: url("../../assets/images/home/box5.png");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .tobBoxNo {
    border-left: 8px solid #f0142f;
    span {
      color: #f0142f;
    }
  }
  .bottomNo {
    border-left: 8px solid #f0142f;
    span {
      color: #f0142f;
    }
  }
}
</style>
